<style lang="scss" scoped>
h4 {
  color: #fff;
}

header {
  width: 100%;
  height: 55px;
  background: #4fc08d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cc {
  padding: 15px;
  .c1 {
    width: 100%;
    height: 250px;
    background: #fff;
    border-radius: 5px;
    .t1 {
      display: flex;
      justify-content: space-around;
      color: #ccc;
      font-size: 15px;
      border-bottom: 1px solid #ccc;
    }
    .t2 {
      display: flex;
      justify-content: space-around;
      text-align: center;
      padding: 15px;
      div {
        span {
          font-size: 14px;
          color: #a0a0a0;
        }
        img {
          width: 50px;
          height: 50px;
        }
      }
    }
    .t3 {
      display: flex;
      justify-content: space-around;
      text-align: center;
      padding: 10px;
      div {
        img {
          width: 20px;
          height: 20px;
        }
      }
    }
  }
}

.RM {
  width: 100%;
  height: 1300px;
  padding: 15px;

  .R1 {
    width: 100%;
    height: 1300px;
    border-radius: 5px;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
  }
  .list {
    dl {
      display: flex;
      padding: 10px;
      dt {
        width: 50px;
        height: 100px;
        img {
          width: 50px;
          height: 50px;
        }
        margin: 0 10px;
      }
      dd {
        .name {
          font-size: 20px;
          font-weight: 800;
        }
      }
    }
  }
}
.RMdoctor {
  dl {
    display: flex;
    padding: 10px;

    dt {
      width: 50px;
      height: 100px;
      img {
        width: 50px;
        height: 50px;
      }
      margin: 0 10px;
    }
    dd {
      .name {
        font-size: 10px;
        font-weight: 800;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      div {
        width: 100%;
        height: 30px;
        font-size: 15px;
      }
    }
  }
}

.cc {
  padding: 15px;
  .c1 {
    width: 100%;
    height: 250px;
    background: #fff;
    border-radius: 5px;
    .t1 {
      display: flex;
      justify-content: space-around;
      color: #ccc;
      font-size: 15px;
      border-bottom: 1px solid #ccc;
    }
    .t2 {
      display: flex;
      justify-content: space-around;
      text-align: center;
      padding: 15px;
      div {
        span {
          font-size: 14px;
          color: #a0a0a0;
        }
        img {
          width: 50px;
          height: 50px;
        }
      }
    }
    .t3 {
      display: flex;
      justify-content: space-around;
      text-align: center;
      padding: 10px;
      div {
        img {
          width: 20px;
          height: 20px;
        }
      }
    }
  }
}

.box {
  width: 100vw;
  height: 100%;
  display: flex;
  .left {
    flex: 8;
    height: 100%;
    overflow: auto;
    div {
      width: 100%;
    }
  }
  .right {
    height: 100%;
    overflow: auto;
    flex: 7;
    div {
      display: flex;
      padding-left: 20px;
      width: 100%;
      height: 46px;
      align-items: center;
    }
  }
}
.activeIndex {
  background: #ccc;
}
</style>

<template>
  <van-nav-bar
    title="网上预约挂号..."
    left-arrow
    @click-left="$router.back()"
  />
  <div style="background: linear-gradient(to bottom, #4fc08d, #fff)">
    <header>
      <div @click="showPopup" :model="city" style="font-size: 18px">
        {{ city }} <van-icon name="arrow-down" />
      </div>
      <van-search
        shape="round"
        background="#4fc08d"
        placeholder="搜索医院、科室、医生"
        @click="$router.push('/RSearch')"
      />
    </header>

    <van-popup v-model:show="show" position="top" :style="{ height: '70%' }">
      <div class="box">
        <div class="left">
          <van-sidebar v-model="active">
            <van-sidebar-item
              v-for="(item, index) in areaList.province_list"
              :key="index"
              :title="item"
              @click="getCity(index)"
            >
            </van-sidebar-item>
          </van-sidebar>
        </div>
        <div class="right">
          <div
            v-for="(v, i) in arr1"
            :key="i"
            :class="{ activeIndex: currentIndex == i }"
          >
            <div @click="handCity(v, i)">{{ v }}</div>
          </div>
        </div>
      </div>
    </van-popup>
    <div class="cc">
      <div class="c1">
        <div class="t1">
          <div>
            <span><van-icon name="flower-o" /></span>官方号源
          </div>
          <div>
            <span><van-icon name="flower-o" /></span>医生本人
          </div>
          <div>
            <span><van-icon name="flower-o" /></span>平台认证
          </div>
          <div>
            <span><van-icon name="flower-o" /></span>诊前退款
          </div>
        </div>

        <div class="t2">
          <div @click="$router.push('/doctor')">
            <img src="../../assets/AYY.png" alt="" />
            <h3>按医院</h3>
            <span>全国知名医院</span>
          </div>

          <div @click="$router.push('/doctor')">
            <img src="../../assets/AKS.png" alt="" />
            <h3>按科室</h3>
            <span>按科室挂号</span>
          </div>

          <div @click="$router.push('/doctor')">
            <img src="../../assets/AYS.png" alt="" />
            <h3>按医生</h3>
            <span>全国知名专家</span>
          </div>
        </div>
        <!-- 科室 -->
        <div class="t3">
          <div>
            <img src="../../assets/NK.png" alt="" />
            <p>内科</p>
          </div>
          <div>
            <img src="../../assets/WK.png" alt="" />
            <p>外科</p>
          </div>
          <div>
            <img src="../../assets/PFK.png" alt="" />
            <p>皮肤科</p>
          </div>
          <div>
            <img src="../../assets/NanK.png" alt="" />
            <p>男科</p>
          </div>
          <div>
            <img src="../../assets/FCK.png" alt="" />
            <p>妇产科</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 挂号 -->
    <van-cell-group inset
      ><van-cell
        title="我的挂号"
        is-link
        @click="$router.push('/MyRegistration')"
        icon="bag-o"
        size="large"
        value="查看记录"
    /></van-cell-group>

    <div class="RM">
      <div class="R1">
        <van-cell-group
          ><van-cell
            title="热门医院"
            is-link
            to="index"
            size="large"
            value="更多"
            @click="$router.push('/PHB')"
        /></van-cell-group>
        <!-- 列表 -->
        <div class="list">
          <dl v-for="(v, i) in ListData" :key="i" @click="onRDetail(v)" :v="v">
            <dt>
              <img :src="v.socoimage" alt="" />
            </dt>
            <dd>
              <div class="name">{{ v.nosocomium }}</div>
              <div>
                <van-tag plain type="success" style="margin: 0 5px">{{
                  v.socostate
                }}</van-tag>
                <van-tag plain type="success">{{ v.socolv }}</van-tag>
              </div>
              <div style="font-size: 14px">科室：{{ v.socoadmin }}</div>
              <div style="font-size: 14px">地址：{{ v.sococity }}</div>
            </dd>
          </dl>
        </div>
      </div>
    </div>
    <van-cell title="热门医生" is-link value="更多" to="index" size="large" />
    <van-tabs v-model:active="active1">
      <van-tab title="全部" style="background: #fff">
        <div
          v-for="(item, index) in YSListData.slice(0, 14)"
          :key="index"
          class="RMdoctor"
        >
          <dl>
            <dt>
              <img
                :src="item.doctorimage"
                alt=""
                style="width: 50px; height: 50px"
              />
            </dt>
            <dd>
              <div class="name">
                <div>{{ item.doctorname }}</div>
                <div style="font-size: 15px">{{ item.doctorstate }}</div>
                <div style="position: absolute;right: -290px;">
                  <van-button
                    round
                    type="success"
                    style="width: 80px; height: 35px"
                    @click="handRDoctor(item)"
                    >去挂号</van-button
                  >
                </div>
              </div>

              <div style="font-size: 14px">{{ item.doctoradministre }}</div>
              <div>
                <van-text-ellipsis :content="item.doctordescword" rows="2"/>
              </div>
            </dd>
          </dl>
        </div>
      </van-tab>

      <van-tab
        v-for="(item, index) in YSListData"
        :key="index"
        :title="item.doctoradministre"
      >
        <div v-if="item.doctoradministre == item.doctoradministre" class="RMdoctor">
          <dl>
            <dt>
              <img
                :src="item.doctorimage"
                alt=""
                style="width: 50px; height: 50px"
              />
            </dt>
           <dd>
              <div class="name">
                <div>{{ item.doctorname }}</div>
                <div style="font-size: 15px">{{ item.doctorstate }}</div>
                <div style="position: absolute;right: -295px;">
                  <van-button
                    round
                    type="success"
                    style="width: 80px; height: 35px"
                    @click="handRDoctor(item)"
                    >去挂号</van-button
                  >
                </div>
              </div>

              <div style="font-size: 14px">{{ item.doctoradministre }}</div>
              <div>
                <van-text-ellipsis :content="item.doctordescword" rows="2"/>
              </div>
            </dd>
          </dl>
        </div>
      </van-tab>
    </van-tabs>

    <!-- 医生 -->
     
    <div class="YS"></div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { areaList } from '@vant/area-data'
import type { ListState, doctorState } from '@/interface'
import axios from 'axios'
import { useRouter } from 'vue-router'
// const CS = ref(0)
const active = ref(0)
const active1 = ref(0)
const ListData = ref<ListState[]>([])
// const value = ref(0)
const router = useRouter()

// 城市
const show = ref(false)
const showPopup = () => {
  show.value = true
}
// const activeIndex = ref(0)
const currentIndex = ref(0)
const city = ref('北京')
const arr1 = ref<string[]>(['北京市'])

const getCity = (v: string) => {
  arr1.value = []

  for (const key in areaList.city_list) {
    if (v.slice(0, 2) == key.slice(0, 2)) {
      arr1.value.push(areaList.city_list[key])
      console.log(v)
    }
  }
}
const handCity = (v: string, i: number) => {
  currentIndex.value = i
  show.value = false
  city.value = v
}

// 列表
const getList = async () => {
  const res = await axios.get('/api/nosocomium/list', {
    params: { pageCode: 1, pageSize: 10, lv: '', city: '' },
  })
  const { data } = res.data
  console.log(res)
  ListData.value = data
}
getList()
// 详情
const onRDetail = (v: ListState) => {
  router.push({
    path: `/RDetail/${v.socoid}`,
  })
}
const YSListData = ref<doctorState[]>([])
const YSList = async () => {
  const res = await axios.get('/api/doctor/list')
  console.log(res)

  const {  data } = res.data
  YSListData.value = data
  console.log(data)
}
YSList()

const handRDoctor = (item: doctorState) => {
  router.push({
    path: `/RDoctor/${item.doctorid}`,
  })
}


</script>
